<template>
  <div class="container">
    <el-page-header
      @back="goBack"
      title="包房预定"
      style="padding: 10px 20px"
    />
    <!--    食堂切换栏-->
    <el-tabs
      type="border-card"
      v-model="canteenActive"
      @tab-click="canteenChange"
    >
      <el-tab-pane
        :label="item.name"
        :name="item.id"
        :key="item.id"
        v-for="item in canteenOptions"
      >
        <el-form :model="OrderForm" inline>
          <el-form-item label="预约时间">
            <el-date-picker
              @change="timeChange"
              v-model="OrderForm.date"
              type="date"
              size="small"
              :default-value="new Date()"
              placeholder="请选择时间"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="套餐类型">
            <el-radio-group v-model="OrderForm.type" @change="typeChange">
              <el-radio
                v-for="item in mealTypeOptions"
                :key="item.dictValue"
                :label="item.dictValue"
                >{{ item.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="食堂餐标" v-show="mealPriceOptions">
            <el-radio-group v-model="OrderForm.price" @change="changPrice">
              <el-radio
                v-for="item in mealPriceOptions"
                :key="item.priceId"
                :label="item.priceId"
                >{{ item.price + "元" }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="mealPriceOptions">
            <el-tooltip
              v-model:visible="tooltipShow"
              :manual="tooltipShow"
              placement="bottom-end"
              trigger="click"
              effect="dark"
            >
              <template #content>
                <div v-html="comboImage" style="padding: 10px 20px"></div>
              </template>
              <i class="el-icon-warning">套餐详情</i>
            </el-tooltip>
          </el-form-item>
        </el-form>
        <!--        时间选择切换-->
        <el-tabs
          v-model="timeActive"
          class="demo-tabs"
          @tab-click="timeHandleClick"
        >
          <el-tab-pane
            v-for="item in dateOptions"
            :key="item"
            :label="item"
            :name="item"
          >
            <!--            预约状态展示-->
            <div class="meal-status">
              <el-tag size="small" type="primary">已预约</el-tag>
              <el-tag size="small" type="success" style="margin: 0 10px"
                >空闲</el-tag
              >
              <el-tag size="small" type="danger" style="margin-right: 10px"
                >已选中</el-tag
              >
              <el-tag size="small" type="info">不可预约</el-tag>
            </div>
            <!--            包房卡片展示-->
            <div class="room-info">
              <el-space wrap>
                <el-card
                  @click="changeStatus(item, index)"
                  :class="currentIndex === index ? 'current' : ''"
                  :style="{
                    background:
                      item.status === '0'
                        ? '#67C23A'
                        : item.status === '1'
                        ? '#409EFF'
                        : '#909399',
                    color: '#ffffff',
                  }"
                  class="box-card"
                  v-for="(item, index) in roomData"
                  :data-id="item.messageId"
                  :key="item.messageId"
                >
                  <template #header>
                    <div class="card-header">
                      <span>{{ item.messageName }}</span>
                    </div>
                  </template>
                  <div style="font-size: 14px">
                    <span
                      >状态：{{
                        item.status === "0"
                          ? "空闲"
                          : item.status === "1"
                          ? "已预约"
                          : "不可预约"
                      }}</span
                    >
                  </div>
                </el-card>
              </el-space>
            </div>
          </el-tab-pane>
          <!--          选中的预约信息-->
          <div class="meal-info" v-show="chooseShow">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>预约信息</span>
                </div>
              </template>
              <el-form :model="mealForm">
                <el-form-item label="包房名">
                  <span>{{ mealForm.name }}</span>
                </el-form-item>
                <el-form-item label="预约人">
                  <span>{{ mealForm.userName }}</span>
                </el-form-item>
                <el-form-item label="预约食堂">
                  <span>{{ mealForm.canteen }}</span>
                </el-form-item>
                <el-form-item label="预约时间">
                  <span>{{ mealForm.time }}</span>
                </el-form-item>
                <el-form-item label="预约类型">
                  <span>{{ mealForm.type === "0" ? "午餐" : "晚餐" }}</span>
                </el-form-item>
                <el-form-item label="预约餐标" v-show="mealForm.price">
                  <span>{{ mealForm.price + "元" }}</span>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="submit"
                    >提交预约</el-button
                  >
                  <el-button size="small">取消</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import {
  canteenList,
  mealType,
  mealPrice,
  nowTime,
  roomList,
  mealRoom,
  mealDetail,
} from "@/api/canteen/order";
import { numToStr } from "@/utils";
import moment from "moment";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();
function goBack() {
  router.back();
}
//食堂选项卡默认选中
const canteenActive = ref("");
//食堂数据
const canteenOptions = ref([]);
//获取食堂数据
function getCanteenList() {
  canteenList().then((res) => {
    //将ID转化为字符串
    res.data.forEach((item) => {
      item.id = numToStr(item.id);
    });
    canteenOptions.value = res.data;
    //食堂默认选中
    canteenActive.value = res.data[0].id;
    //通过ID查询餐标数据
    mealPrice({
      canteenId: canteenActive.value,
      orderEatTime: OrderForm.value.date,
      orderEatType: 0,
    }).then((res) => {
      mealPriceOptions.value = res.data;
      if (res.data) OrderForm.value.price = res.data[0].priceId;
    });
    if (OrderForm.value.price) {
      getMealInfo(OrderForm.value.price);
    }
  });
}
//筛选数据
const OrderForm = ref({});
//获取当前时间戳
const getNowTime = () => {
  const time = new Date().getTime();
  OrderForm.value.date = moment(time).format("YYYY-MM-DD");
};
//套餐类型
const mealTypeOptions = ref([]);
//获取套餐类型
function getMealType() {
  mealType().then((res) => {
    mealTypeOptions.value = res.data;
    OrderForm.value.type = res.data[0].dictValue;
  });
}
//餐标数据
const mealPriceOptions = ref([]);
//食堂选项卡切换
function canteenChange(val) {
  canteenActive.value = val.props.name;
  mealForm.value.canteen = val.props.label;
  //  获取食堂信息
  roomList({
    orderEatTime: OrderForm.value.date ? OrderForm.value.date : new Date(),
    orderEatType: OrderForm.value.type ? OrderForm.value.type : 0,
    messageLocationId: canteenActive.value,
  }).then((res) => {
    currentIndex.value = "";
    roomData.value = res.data;
    //通过ID查询餐标数据
    mealPrice({
      canteenId: canteenActive.value,
      orderEatTime: OrderForm.value.date,
      orderEatType: OrderForm.value.type,
    }).then((res) => {
      mealPriceOptions.value = res.data;
      if (res.data) OrderForm.value.price = res.data[0].priceId;
      if (OrderForm.value.price) getMealInfo(OrderForm.value.price);
    });
  });
}
//时间选项卡默认选择
const timeActive = ref("");
//时间状态切换
function timeHandleClick(val) {
  OrderForm.value.date = val.props.name;
  mealForm.value.time = val.props.name;
  //通过ID查询餐标数据
  mealPrice({
    canteenId: canteenActive.value,
    orderEatTime: OrderForm.value.date,
    orderEatType: 0,
  }).then((res) => {
    mealPriceOptions.value = res.data;
    if (res.data) OrderForm.value.price = res.data[0].priceId;
    getRoomInfo();
    if (OrderForm.value.price) {
      getMealInfo(OrderForm.value.price);
    }
  });
}
// 日期数据
const dateOptions = ref([]);
//获取时间数据
function getDateList() {
  nowTime({
    time: OrderForm.value.date ? OrderForm.value.date : new Date(),
  }).then((res) => {
    dateOptions.value = res.data.map((item) =>
      moment(item).format("YYYY-MM-DD")
    );
    timeActive.value = dateOptions.value[0];
  });
}
//包房信息
const roomData = ref([]);
//获取包房信息
function getRoomInfo() {
  roomList({
    orderEatTime: OrderForm.value.date ? OrderForm.value.date : new Date(),
    orderEatType: OrderForm.value.type ? OrderForm.value.type : 0,
    messageLocationId: canteenActive.value,
  }).then((res) => {
    roomData.value = res.data;
  });
}
//当前数组选中下标
const currentIndex = ref("");
//包房ID
const messageId = ref("");
//餐标ID
const orderPriceId = ref("");
//选中数组
function changeStatus(val, index) {
  if (val.status !== "0") {
    ElMessage.warning("请选择空闲包房");
    return;
  }
  currentIndex.value = index;
  chooseShow.value = true;
  //  获取当前选中食堂名称
  canteenOptions.value.map((item) => {
    if (item.id === canteenActive.value) {
      mealForm.value.canteen = item.name;
    }
  });
  //  获取当前预约用户名称
  mealForm.value.userName = JSON.parse(
    sessionStorage.getItem("userInfo")
  ).nickname;
  //  获取预约时间
  mealForm.value.time = OrderForm.value.date;
  mealForm.value.type = OrderForm.value.type;
  mealForm.value.name = val.messageName;
  messageId.value = val.messageId;
  //获取餐标ID
  if (mealPriceOptions.value) {
    mealPriceOptions.value.forEach((item) => {
      if (item.priceId === OrderForm.value.price) {
        mealForm.value.price = item.price;
        orderPriceId.value = item.priceId;
      }
    });
  }
}
//套餐切换
function typeChange(val) {
  comboImage.value = "";
  //通过ID查询餐标数据
  mealPrice({
    canteenId: canteenActive.value,
    orderEatTime: OrderForm.value.date,
    orderEatType: val,
  }).then((res) => {
    currentIndex.value = "";
    mealForm.value.type = val;
    mealPriceOptions.value = res.data;
    if (res.data) OrderForm.value.price = res.data[0].priceId;
    getRoomInfo();
    if (OrderForm.value.price) {
      getMealInfo(OrderForm.value.price);
    }
  });
}
//时间选择
function timeChange(val) {
  timeActive.value = val;
  OrderForm.value.date = val;
  mealForm.value.time = val;
  nowTime({
    time: val,
  }).then((res) => {
    dateOptions.value = res.data.map((item) =>
      moment(item).format("YYYY-MM-DD")
    );
    getRoomInfo();
  });
}
//餐标切换
function changPrice(val) {
  mealForm.value.price = val;
  getMealInfo(val);
}
//预约信息
const mealForm = ref({});
//已选择表单数据显示与隐藏
const chooseShow = ref(false);
//提交预定信息
function submit() {
  mealRoom({
    messageId: messageId.value,
    messageLocationId: canteenActive.value,
    orderEatType: mealForm.value.type,
    orderEatTime: mealForm.value.time,
    orderPriceId: mealForm.value.price,
  }).then((res) => {
    if (res.code === 200) {
      ElMessageBox.confirm(res.msg, "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",

        type: "warning",
      })
        .then(() => {
          router.back();
        })
        .catch(() => {});
    }
  });
}
//套餐详情显示与隐藏
const tooltipShow = ref(false);
//套餐详情
const comboImage = ref("");
//获取套餐详情
function getMealInfo(id) {
  mealDetail({
    priceId: id,
  }).then((res) => {
    comboImage.value = res.data.comboImage;
  });
}
onMounted(() => {
  getCanteenList();
  getNowTime();
  getMealType();
  getDateList();
  setTimeout(() => {
    getRoomInfo();
  }, 1000);
});
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 200px);
  background: #ffffff;
  box-shadow: 0 0 16px rgba(96, 96, 96, 0.16);
  border-radius: 6px;
  padding: 20px;
  overflow-y: auto;
  margin-top: 20px;
}
::v-deep {
  .el-tabs__content {
    height: calc(100vh - 320px);
    overflow-y: auto;
  }
  .el-card__header {
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
  }
}
.room-info {
  margin-top: 20px;
  .box-card {
    cursor: pointer;
    width: 200px;
  }
}
.current {
  background: #f56c6c !important;
  color: #ffffff;
}
.unChoose {
  background: #909399 !important;
  color: #ffffff;
}
.meal-info {
  margin-top: 20px;
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
